<template>
  <view class="container">
    <v-image width="100vw" mode="widthFix" :src="imageSrc" />
    <view class="hotspot-container">
      <view
        v-for="(item, index) in component.hotspotList"
        :key="index"
        :style="itemStyle(item)"
        @click="clickHandle(item)"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import type { CSSProperties } from 'vue';

const props = defineProps<{
  component: StorePageHotspotItem;
}>();

const emits = defineEmits<{
  navigate: [event: string, value: string | undefined];
}>();

const imageSrc = computed(() => props.component?.url);

const itemStyle = (item: StorePageHotspotItem['hotspotList'][number]) => {
  const styles: CSSProperties = {
    position: 'absolute',
    top: `${item.y}rpx`,
    left: `${item.x}rpx`,
    width: `${item.width}rpx`,
    height: `${item.height}rpx`
  };
  return styles;
};

const clickHandle = (item: StorePageHotspotItem['hotspotList'][number]) => {
  if (item.event === 'page') {
    emits('navigate', item.event, item.page);
  } else if (item.event === 'product') {
    emits('navigate', item.event, item.product);
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  .hotspot-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
}
</style>
